import 'video.js/dist/video-js.min.css';

import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import type { VideoJsPlayer } from 'video.js';
import videojs from 'video.js';

import Titlebar from '@/components/layout/TitleBar';

import styles from './index.less';

const APP = () => {
  const playerRef = useRef<VideoJsPlayer>();
  useEffect(() => {
    if (document.getElementById('my-player')) {
      const options = {};

      playerRef.current = videojs('my-player', options, function onPlayerReady() {
        console.log(this);
        this.on('error', function (err) {
          console.log(9999, err);
          playerRef.current?.errorDisplay.close(); // 将错误信息不显示
          // 自定义显示方式
        });
        this.error(null);
        // this.play();
        this.on('ended', function () {});
      });
    }
  }, [document.getElementById('my-player')]);
  return (
    <div className={styles.content}>
      <Titlebar />
      <div className={styles.videoBox}>
        <video
          id="my-player"
          className="video-js"
          controls
          onError={(err) => {
            playerRef.current?.errorDisplay.close();
            playerRef.current?.createModal('', {}).close();
            console.log(err);
          }}
          preload="auto"
          data-setup="{}"
        >
          <source src="http://127.0.0.1:8888?startTime=0" type="video/mp4" />
        </video>
      </div>
    </div>
  );
};

ReactDOM.render(<APP />, document.getElementById('root'));
